<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    width="80%"
    @close="handleClose"
  >
    <div class="form-block">
      <div class="form-block-title">基本信息</div>
      <el-descriptions :column="3">
        <el-descriptions-item label="塘口名称">
          <b>{{ form.name || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="塘口面积">
          <b>{{ form.area ? form.area + "亩" : "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="塘口类型">
          <dict-tag
            :options="dict.type.biz_culture_pond_type"
            :value="form.type"
          ></dict-tag>
        </el-descriptions-item>
        <el-descriptions-item label="所属基地">
          <b>{{ form.productionBaseName || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          <b>{{ form.remarks || "-" }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="塘口照片" :span="3">
          <div class="padding">
            <ImagePreview
              :src="form.fileUrls || placeholderImg"
              :width="100"
              :height="100"
            ></ImagePreview>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="form-block">
      <div class="form-block-title">关联设备</div>
      <ul class="relevance-card">
        <li v-for="item in form.deviceList" :key="item.id">
          <div class="relevance-card-content">
            <div>
              <ImagePreview
                :src="item.fileUrls || placeholderImg"
                :width="70"
                :height="70"
              ></ImagePreview>
            </div>
            <div class="pl-10">
              <p class="title_18px">{{ item.name }}</p>
              <p>
                <span class="title_gray">编号：{{ item.code }}</span>
              </p>
              <p>
                <span class="title_gray"
                  >绑定区域：{{
                    item.culturePondId
                      ? item.productionBaseName
                      : item.culturePondName
                  }}</span
                >
              </p>
            </div>
          </div>
          <div class="relevance-card-footer">
            <div>
              <span class="title_gray">投运日期：</span
              >{{ item.useDate || "-" }}
            </div>
          </div>
        </li>
      </ul>
      <p class="relevance-empty" v-if="!isNonEmptyArray(form.deviceList)">未关联设备</p>
    </div>

    <div class="form-block">
      <div class="form-block-title">关联人员</div>
      <ul class="relevance-card">
        <li v-for="item in form.userList" :key="item.id">
          <div class="relevance-card-content">
            <div>
              <ImagePreview
                :src="item.avatar || placeholderImg"
                :width="70"
                :height="70"
              ></ImagePreview>
            </div>
            <div class="pl-10">
              <p class="title_18px">{{ item.username }}</p>
              <p>
                <span class="title_gray">角色：{{ item.roleNames }}</span>
              </p>
              <p>
                <span class="title_gray"
                  >管理区域：{{
                    item.culturePondNames || item.productionBaseNames
                  }}</span
                >
              </p>
            </div>
          </div>
        </li>
      </ul>
      <p class="relevance-empty" v-if="!isNonEmptyArray(form.userList)">未关联人员</p>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detail } from "@/api/production/pond";
import ImagePreview from "@/components/ImagePreview";
export default {
  name: "production-pond_detail",
  components: { ImagePreview },
  dicts:["biz_culture_pond_type"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      placeholderImg: require("@/assets/images/production.png"),
      baseUrl: process.env.VUE_APP_BASE_API,
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      queryParams: { id: undefined },
      title: "详细信息",
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.open = val;
        this.title = this.params.title;
        if (val) {
          this.queryParams.id = this.params.id;
          this.getDetail();
        }
      },
    },
  },
  methods: {
    isNonEmptyArray(variable) {
      return Array.isArray(variable) && variable.length > 0;
    },
    getDetail() {
      detail(this.queryParams).then((res) => {
        this.form = res.data;
      });
    },
    // 取消按钮
    handleClose() {
      this.$emit("update:visible", false);
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">
.relevance-card {
  width: 100%;
  height: 100%;
  overflow: hidden;
  & > li {
    width: 24%;
    height: 120px;
    float: left;
    margin-right: calc(4% / 3);
    margin-bottom: calc(4% / 3);
    border-radius: 3px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 0 3px 0 rgba($color: #000000, $alpha: 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &:nth-child(4n) {
      margin-right: 0;
    }
    &:nth-last-child(-n + 4) {
      margin-bottom: 0;
    }
    .relevance-card-content {
      width: 100%;
      display: flex;

      & > img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
        flex-shrink: 0;
      }
    }
  }
}

::v-deep .el-descriptions__body {
  background-color: transparent !important;
}
</style>